<template>
    <div class="page">
        <van-nav-bar
            title="比赛视频"
            left-arrow
            fixed
            @click-left="goBack"
        />

        <div class="video-nav-box">
            <div
                class="video-nav-item"
                :class="videoType==0?'active':''"
                @click="videoTypeClick(0)"
            >教学视频</div>
            <div
                class="video-nav-item"
                :class="videoType==1?'active':''"
                @click="videoTypeClick(1)"
            >玩家视频</div>
        </div>

        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div class="video-list">
                <div
                    class="video-item"
                    @click="videoPlay(item.vidoe,item.game_id)"
                    v-for="(item,index) in videoList"
                    :key="index"
                >
                    <!-- <van-image
                        class="video-poster"
                        fit="cover"
                        :src="posterDefault"
                    /> -->
                    <video
                        class="video-poster"
                        :src="item.video"
                        v-if="videoType==1"
                    />
                    <video
                        class="video-poster"
                        :src="item.vidoe"
                        v-if="videoType==0"
                    />
                    <div class="video-name van-ellipsis">{{item.video_name}}</div>
                </div>
            </div>
        </van-list>

        <van-overlay
            :show="show"
            @click="hideOverlay"
        >
            <div
                class="video-player-box"
                @click.stop
            >
                <video-player
                    class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="playsinline"
                    :options="playerOptions"
                    v-if="show"
                    @canplay="onPlayerCanplay($event)"
                ></video-player>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data () {
        return {
            videoType: 1,
            videoList: [],
            nowPage: 0,
            posterDefault: require('../assets/video-poster-default.png'),
            loading: false,
            finished: false,
            show: false,
            playerOptions: {
                aspectRatio: '16:9',
                fluid: true,
                preload: 'auto',
                sources: [
                    {
                        type: 'video/mp4',
                        src: ''
                    }
                ]
            }
        }
    },
    mounted () {
        // this.getVideoList()
    },
    computed: {
        playsinline () {
            var ua = navigator.userAgent.toLocaleLowerCase();
            //x5内核
            if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                return false
            } else {
                //ios端
                return true
            }
        }
    },
    methods: {
        getVideoList () {
            if (this.videoType == 0) {
                this.$request({
                    url: '/api/Game/game_teather_vido',
                    method: 'post',
                    params: {
                        page: this.nowPage,
                        limit: 10
                    }
                }).then(res => {
                    this.loading = false
                    this.nowPage = this.nowPage + 1
                    this.videoList = this.videoList.concat(res)
                }).catch(res => {
                    this.finished = true
                })
            }
            else {
                this.$request({
                    url: '/api/Game/game_list',
                    method: 'post',
                    params: {
                        page: this.nowPage,
                        limit: 10
                    }
                }).then(res => {
                    this.loading = false
                    this.nowPage = this.nowPage + 1
                    this.videoList = this.videoList.concat(res)
                }).catch(res => {
                    this.finished = true
                })
            }
        },
        goBack () {
            this.$router.go(-1)
        },
        onLoad () {
            this.getVideoList()
        },
        videoPlay (source, id) {
            if (this.videoType == 0) {
                this.playerOptions.sources[0].src = source
                this.show = true
            }
            else {
                this.$router.push({
                    path: '/gameDetail',
                    query: {
                        game_id: id
                    }
                })
            }
        },
        hideOverlay () {
            this.show = false
            this.$refs.videoPlayer.player.pause()
        },
        videoTypeClick (index) {
            if (this.videoType == index) {
                return
            }
            this.videoType = index
            this.videoList = []
            this.nowPage = 0
            this.finished = false
            this.getVideoList()
        },
        onPlayerCanplay (player) {
            // console.log('player Canplay!', player)
            //解决自动全屏
            var ua = navigator.userAgent.toLocaleLowerCase();
            //x5内核
            if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {

                $('body').find('video').attr('x-webkit-airplay', true).attr('x5-playsinline', true).attr('webkit-playsinline', true).attr('playsinline', true)
            } else {
                //ios端
                $('body').find('video').attr('webkit-playsinline', "true").attr('playsinline', "true")

            }
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    padding-top: 92px;
}

.video-nav-box {
    display: flex;
    border-top: 20px solid #f6f6f6;
    .active {
        border-color: #e62129;
        color: #e62129;
    }
}

.video-nav-item {
    flex: 1;
    line-height: 86px;
    text-align: center;
    font-weight: 500;
    font-size: 32px;
    color: #434343;
    border-bottom: 4px solid #fff;
}

.video-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 38px;
}

.video-item {
    width: 322px;
    margin-bottom: 20px;
}

.video-poster {
    width: 320px;
    height: 200px;
    border-radius: 6px;
    overflow: hidden;
}

.video-name {
    font-weight: 500;
    font-size: 26px;
    color: #393939;
    text-align: center;
    margin-top: 6px;
}

.video-player-box {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
}
</style>

